<template>
    <div>
        <Select v-model="mode1" style="width:200px;margin: 3px;" placeholder="请选择区">
            <Option v-for="item in areaList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        <Select v-model="mode2" style="width:200px;margin: 3px;" placeholder="请选择街道">
            <Option v-for="item in streeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        <Select v-model="mode3" style="width:200px;margin: 3px" placeholder="请选择社区">
            <Option v-for="item in commList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        <DatePicker type="date" placement="selectDate" placeholder="请选择时间" style="width: 200px">
        </DatePicker>
        <Input v-model="value" placeholder="请输入姓名/电话" style="width: 200px;margin: 5px" />
        <Button type="primary">搜索</Button>
        <Modal v-model="modal1" title="查看详情" footer-hide  width="700px">
            <!-- <div slot="header" style ="display: none"></div>-->
            <Tabs value="name1">
                <TabPane label="月度平均分(60%)" name="name1">
                    <Row class="p10" type="flex" justify="space-between">
                        <Col span="12">
                            <span class="bold">2019-07</span>
                        </Col>
                        <Col span="12">
                            <span>98分</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">2019-06</span>
                        </Col>
                        <Col span="12">
                            <span>96分</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">2019-05</span>
                        </Col>
                        <Col span="12">
                            <span>97分</span>
                        </Col>
                    </Row>
                </TabPane>
                <TabPane label="评测(30%)" name="name2">
                    <Row class="p10">
                        <Col span="24">
                            <div class="bold">评测分数：95分</div>
                            <div>专家评价：社区活动丰富，环境卫生良好，需要提高社区安全管理</div>
                        </Col>
                    </Row>
                </TabPane>
                <TabPane label="街道考评组(10%)" name="name3">
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">社区卫生</span>
                        </Col>
                        <Col span="12">
                            <span>+35分</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">社区安全</span>
                        </Col>
                        <Col span="12">
                            <span>+25分</span>
                        </Col>
                    </Row><Row class="p10">
                    <Col span="12">
                        <span class="bold">社区老年服务</span>
                    </Col>
                    <Col span="12">
                        <span>+25分</span>
                    </Col>
                </Row>

                </TabPane>
            </Tabs>
            <div slot="footer">
            </div>

        </Modal>
        <Table :columns="columns1" :data="data1" style="margin-top: 20px; ">
            <template slot-scope="{row,param}" slot="operate">
                <Button type="primary" size="small" style="margin-right: 5px" @click="show(param)">查看详情</Button>
            </template>
        </Table>
        <div class="page-content">
            <Row>
                <Col span="24" class="lyx-mb10">
                    <Table border ref="selection" :columns="columns4" :data="data1" @on-selection-change="tableSelectChange"></Table>
                </Col>
            </Row>
            <Row type="flex" justify="space-between" class="lyx-mb10">
                <Col span="12">
                    <!--                    <Button @click="handleSelectAll(true)" class="lyx-mr10">全选</Button>-->
                    <!--                    <Button @click="handleSelectAll(false)">取消</Button>-->
                </Col>
                <Col span="12">
                    <Page :total="50" show-total />
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
export default {

  data () {
    return {
      areaList: [
        {
          value: '大东区',
          label: '大东区'
        },
        {
          value: '和平区',
          label: '和平区'
        },
        {
          value: '皇姑区',
          label: '皇姑区'
        },
        {
          value: '铁西区',
          label: '铁西区'
        }
      ],
      streeList: [
        {
          value: '小东街道',
          label: '小东街道'
        },
        {
          value: '新东街道',
          label: '新东街道'
        },
        {
          value: '大北街道',
          label: '大北街道'
        },
        {
          value: '东站街道',
          label: '东站街道'
        }
      ],
      commList: [
        {
          value: '小东社区',
          label: '小东社区'
        },
        {
          value: '新东社区',
          label: '新东社区'
        },
        {
          value: '大北社区',
          label: '大北社区'
        },
        {
          value: '东站社区',
          lable: '东站社区'
        }
      ],
      nameList: [
        {
          value: '韩月',
          label: '韩月'
        }
      ],
      mode1: '',
      mode2: '',
      mode3: '',
      mode4: '',
      mode5: '',
      modal1: false,
      columns1: [
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '联系电话',
          key: 'tel'
        }, {
          title: '综合评分',
          key: 'score'
        },
        {
          title: '月度平均分(60%)',
          key: 'check'
        }, {
          title: '评测(30%)',
          key: 'political'
        },
        {
          title: '街道考评组(10%)',
          key: 'work'
        }, {
          title: '操作',
          key: 'operate',
          width: '150',
          align: 'center',
          slot: 'operate'
        }

      ],
      data1: [
        {
          name: '韩月',
          tel: '15642458890',
          score: '优',
          check: '97分',
          political: '95分',
          work: '85分'

        },
        {
          name: '朱丽霞',
          tel: '13456789765',
          score: '优',
          check: '95分',
          political: '92分',
          work: '80分'

        },
        {
          name: '张少阳',
          tel: '13789654321',
          score: '良',
          check: '87分',
          political: '89分',
          work: '81分'

        },
        {
          name: '王辉',
          tel: '18543278654',
          score: '优',
          check: '97分',
          political: '96分',
          work: '91分'

        },
        {
          name: '李厚毅',
          tel: '13045321678',
          score: '良',
          check: '85分',
          political: '89分',
          work: '79分'

        }, {
          name: '于心',
          tel: '13065431290',
          score: '优',
          check: '97分',
          political: '98分',
          work: '91分'

        }, {
          name: '李丽红',
          tel: '13542139865',
          score: '良',
          check: '84分',
          political: '86分',
          work: '81分'

        }
      ]

    }
  },
  methods: {
    show (param) {
      this.modal1 = true
    }
  }
}
</script>

<style scoped>
    .p10{
        font-size: 15px;
        padding: 5px;
        text-align: left;
        border-bottom: 1px solid #E8EAEC;
        line-height: 50px;
    }
    .lyx-mb10{
        margin-bottom: 10px;
    }
</style>
